<template>
    <el-card>
        <el-tabs>
            <el-tab-pane label="用户信息" class="info">
                <el-form :model="form">
                    <div class="info-top">
                        <div class="info-avatar">
                            <el-image
                                src="/pixiv/c/540x540_70/img-master/img/2023/10/17/00/00/19/112610962_p0_master1200.jpg"
                            />
                        </div>
                        <div class="info-name">
                            <el-form-item label="昵称">
                                <el-input v-model="form.name" />
                            </el-form-item>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item
                                        label="邮箱"
                                        autocomplete="off"
                                    >
                                        <el-input v-model="form.name" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="QQ" autocomplete="off">
                                        <el-input v-model="form.name" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item>
                                <el-input
                                    :rows="4"
                                    type="textarea"
                                    placeholder="Please input"
                                />
                            </el-form-item>
                        </div>
                    </div>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit"
                            >Create</el-button
                        >
                        <el-button>Cancel</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码"><Password /></el-tab-pane>
            <!-- <el-tab-pane label="Role">Role</el-tab-pane> -->
            <!-- <el-tab-pane label="Task">Task</el-tab-pane> -->
        </el-tabs>
    </el-card>
</template>

<script lang="ts" setup>
import { reactive } from "vue"
import Password from "./components/PasswordComponent.vue"

// do not use same name with ref
const form = reactive({
    name: "",
    region: "",
    date1: "",
    date2: "",
    delivery: false,
    type: [],
    resource: "",
    desc: "",
})

const onSubmit = (): void => {
    console.log("submit!")
}
</script>
<style lang="scss" scope>
.info {
    .info-top {
        display: flex;
        flex-direction: row;
        justify-content: spans-between;
        width: inherit;
        height: 200px;
        gap: 10px;
        margin-bottom: 18px;
        .info-name {
            /* width : calc() */
            flex: 1;
        }

        .info-avatar {
            width: 200px;
            height: 200px;
            img {
                object-fit: cover;
                height: 200px;
                width: 200px;
            }
        }
    }
}
</style>
